<template>
  <div v-loading="hearListLoading">
<!--    <div class="title">请选择需要分发的审理室</div>-->
<!--    <div class="title-box">-->
<!--      <div class="box" :rules="rules" v-for="item in hearList" :key="item.id" :class="fairActive==item.id?'fairActive-active':''" @click="transfer(item.id)">-->
<!--        <div class="name">姓名：{{item.realName}}</div>-->
<!--        <div class="name">身份：{{item.roleName}}</div>-->
<!--      </div>-->
<!--    </div>-->
    <div class="title">请选择需要分配的单位管理员</div>
    <div class="title-box">
<!--      多选-->
      <el-checkbox-group v-model="checkboxGroup1" @change="changeEdu">
        <el-checkbox-button v-for="item in hearList1" :label="item.id">
          <div> 姓名：{{item.name}}</div>
          <div> 身份：{{item.roleName}}</div>
        </el-checkbox-button>
      </el-checkbox-group>
<!--      单选-->
<!--      <div class="box" v-for="item in hearList1" :key="item.id" :class="fairActive1==item.id?'fairActive-active':''" @click="transfer1(item.id)">-->
<!--        <div class="name">姓名：{{item.realName}}</div>-->
<!--        <div class="name">身份：{{item.roleName}}</div>-->
<!--      </div>-->
    </div>

  </div>
</template>

<script>
import * as salvationApi from '@/api/salvation'
import { allocationApi } from '@/api/salvation'
export default {
  name: "PhotoDetails",
  props:['id','Close3','dialogVisible3',],
  data() {
    return {
      hearListLoading:false,
      fairActive1:20,
      fairActive:25,
      hearList1:[],
      hearList:[],
      adminUserId:0,
      checkboxGroup1:[],
    }
  },
  mounted(){
    this.selectReviewRoom()
    // this.selectSponsor()
  },
  methods: {
    transfer(e){
      this.fairActive = e
    },
    changeEdu(ids){
      this.checkboxGroup1 = ids
    },
    distribute(id){
      const ids = id
      if(this.checkboxGroup1.length <= 0){
        this.$message.warning('请选择单位管理员')
        return
      }
      this.checkboxGroup1= this.checkboxGroup1.join(',')
      this.saveLoading=true;
      allocationApi({id:ids, unitsId:this.checkboxGroup1}).then(res => {
        this.$message.success('分发成功')
        this.Close3();
      }).finally(()=>{
        this.saveLoading = false
      })
    },
    selectReviewRoom() {
      this.hearListLoading = true
      salvationApi.list1().then(res => {
        this.hearList1 = res.list
      }).finally(()=>{
        this.hearListLoading = false
      })
    },
    //审核接口
    // getAdminExamineApi() {
    //   adminExamineApi({id : this.id,examine:1,examineRemark:this.content}).then(res => {
    //   }).finally()
    // },
  }
}
</script>
<style scoped lang="scss">
.title{
  font-size: 18px;
  margin:  0 0 20px 0;
  color: #333333;

}
::v-deep{
  .el-checkbox-button__inner{
    width: 272px;
    height: 73px;
    border: 1px solid #dcdfe6;
    margin: 10px;
    padding: 20px;
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    line-height: 17px;
  }
  .el-checkbox-button:last-child .el-checkbox-button__inner{
    width: 272px;
    height: 73px;
    border: 1px solid #dcdfe6;
    margin: 10px;
    padding: 20px;
    cursor: pointer;
    font-size: 16px;
    text-align: left;
    line-height: 17px;
  }
}
.title-box1{
  width: 100%;
  display: flex;
}
.title-box{
  width: 100%;
  display: flex;
  .box{
    width: 30%;
    border: 1px solid #dcdfe6;
    margin: 10px;
    padding: 20px;
    cursor: pointer;
    font-size: 16px;
  }
  .box.fairActive-active{
    background-color: #1890FF;
    color: #FFFFFF;
    border: none;
  }
}
.dialog-footer{
  padding: 10px;
  text-align: right;
  margin-top: 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 1px solid #dcdfe6;
}

.audit{
  width: calc(100% - 40px)/4;
  height: 100%;
  padding: 20px;
  border: 1px solid #dcdfe6;
  margin: 0 20px;
}
.textarea-no-border{
  ::v-deep.el-textarea__inner{
    border:none!important;
    padding:7px 0;
    font-family: 'arial,sans-serif';
    font-size:14px;
  }
}
.avatar{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  margin-left: 18px;
  img{
    width: 100%;
    height: 100%;
  }
}
.dashboard-workplace {
  &-header {
    &-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      margin-right: 16px;
      font-weight: 600;
    }

    &-tip {
      width: 95%;
      display: inline-block;
      vertical-align: middle;
      margin-top: -12px;
      &-title {
        font-size: 13px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        line-height: 18px;
        padding: 10px 0 10px;
      }

      &-desc {
        &-sp {
          width: 24%;
          color: #17233D;
          font-size: 13px;
          display: inline-block;
        }
      }
    }

    &-extra {
      .ivu-col {
        p {
          text-align: right;
        }

        p:first-child {
          span:first-child {
            margin-right: 4px;
          }

          span:last-child {
            color: #808695;
          }
        }

        p:last-child {
          font-size: 22px;
        }
      }
    }
  }
}
.pb-1{
  padding-bottom: 10px;
}
.mr20{
  margin: 0 20px;
}
.border_bottom{
  border-bottom: 1px solid #E7EAEC;
}
.pb-24{
  padding-bottom: 24px;
}
.title-desc{
  font-size:16px;
  color:#087fff;
  font-weight:bold;
  margin:0 0 20px 10px;
}

.pictrue{
  width: 120px;
  height: 120px;
  border: 1px dotted rgba(0,0,0,0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  .photo-el-image{
    width: 100%;
    height: 100%;
  }
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
  }
}
.videoBox{
  width: 300px;
  height: 180px;
  //border: 1px dotted rgba(0,0,0,0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;
  border-radius:15px;
  img{
    width: 100%;
    height: 100%;
  }
  video{
    width: 100%;
    height: 100%;
    border-radius:15px;
  }
}
.btndel{
  position: absolute;
  z-index: 1;
  width :20px !important;
  height: 20px !important;
  font-size:20px;
  left: 92px;
  top: -4px;
}
.video-btndel{
  left: 282px;
  top: 1px;
}
.tips{
  color: #c0c4cc;
  font-size:14px;
}
.img{
  width: 420px;
  height: 250px;
}
</style>
